<template>
    <div class="header">
        <el-tabs v-model="activeValue" @tab-click="tabClick">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component :is="item.content" :activeValue="activeValue" @tab-change="tabChange" :echartParams="echartParams"></component>
            </el-tab-pane>
        </el-tabs>
        <!-- 查看明细 -->
        <el-dialog
            drag
            :visible.sync="entryDetailVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="1000px"
            top="5vh"
            v-if="entryDetailVisible"
        >
            <ItemRealTimeMonitoringEntryTable :entry-info="currentEntryInfo" />
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="closeModal">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import DataStatistics from './item-real-time-monitoring/data-statistics.vue';
import FundResult from './item-real-time-monitoring/fund-result.vue';
import ItemRealTimeMonitoringEntryTable from './item-real-time-monitoring/item-real-time-monitoring-entry-table.vue';
import ItemResult from './item-real-time-monitoring/item-result.vue';

@Component({ name: 'ItemRealTimeMonitoring', components: { DataStatistics, ItemResult, FundResult, ItemRealTimeMonitoringEntryTable } })
export default class ItemRealTimeMonitoring extends Vue {
    activeValue: string = 'data-statistics';
    panes: any[] = [
        {
            label: '数据统计',
            name: 'data-statistics',
            content: 'DataStatistics',
        },
        {
            label: '条目结果',
            name: 'item-result',
            content: 'ItemResult',
        },
        {
            label: '产品结果',
            name: 'fund-result',
            content: 'FundResult',
        },
    ];

    echartParams: any = {
        isClick: true,
    };

    entryDetailVisible: boolean = false;
    currentEntryInfo: any = {};

    // rendCount: number = -1;
    created() {
        // 资管页面写死 黑曜金 主题
        try {
            const frames = window.frames;
            frames.document.body.setAttribute('data-theme', 'gold');
        } catch (e) {
            console.log(e);
        }
    }

    mounted() {
        this.$on('handleEntryDetail', this.showEntryDetailList);
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    showEntryDetailList(params) {
        this.entryDetailVisible = true;
        // this.rendCount++;
        this.currentEntryInfo = params;
        // this.currentEntryInfo = {
        //     entryCode: 'YH1575',
        // };
    }

    closeModal() {
        this.entryDetailVisible = false;
    }

    // 标签页内跳转
    tabChange($event) {
        const { type, name, params } = $event;
        console.log($event, '$event-----------------change');
        this.activeValue = name[0];
        this.echartParams = { type, name, params, isClick: false };
    }

    // 点击标签
    tabClick() {
        this.echartParams.isClick = true;
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';

.header {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        border: none;
        // .is-active {
        //     border-color: #409eff;
        //     border-bottom: 2px solid #409eff;
        // }
    }
    .el-tabs__content {
        height: calc(100% - 35px);
        overflow: auto;
        // padding: 10px;
        .el-tab-pane {
            color: #333;
            height: 100%;
        }
    }
}

/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}
.dialog-footer {
    text-align: right;
    margin-right: 20px;
}
/deep/.vxe-header--row .vxe-header--column .vxe-cell {
    display: flex;
    justify-content: start !important;
}
/deep/ .el-tag--dark {
    border: none;
}
</style>
